<template>
	<view>

		<u-sticky offset-top="1">
			<u-tabs :list="orderstatus" @click="selectStatues"></u-tabs>
		</u-sticky>





		<view v-if="empty == 'isempty'" class="list">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">

			</u-empty>
		</view>


		<view class="search">
			<u-search class="left" placeholder="请输入关键词" @change="selectparams" @clear="clearkeyword" :bgColor="searchstyle"
				:borderColor="borderstyle" :showAction="false" v-model="keyword"></u-search>
			<view class="backtop">
				<u-button type="primary" @click="topback" class="custom-style" :plain="true" size="mini"
					text="刷新"></u-button>

			</view>

		</view>

		<!-- 筛选 -->
		<u-picker :show="filtershow" ref="uPicker" :columns="columns" @confirm="confirmfilter" @cancel="cancelfilter"
			@change="changeHandler"></u-picker>



		<u-calendar :mode="'range'" :monthNum="24" :minDate="lastYeardate" :maxDate="nextYeardate" :show="showdate"
			@close="closedate" @confirm="confirmdate" startText="选择开始" endText="选择结束" confirmDisabledText="请选择查询审批时间段"
			:formatter="formatter" />

		<u-sticky offset-top="105">
			<view class="btngroup">
				<view class="datebtn">
					<u-tag :text="'日期筛选'" @click="selectdate" plain="true" size="mini" type="info" />

				</view>
				<view class="storebtn">
					<u-tag :text="'门店筛选'" @click="shaixuan" plain="true" size="mini" type="primary" />

				</view>
			</view>

		</u-sticky>



		<view class="content">
			<u-cell-group v-if="empty == 'notempty'">

				<u-swipe-action :autoClose="true">

					<u-list height="600" :preLoadScreen="page * 3" @scrolltolower="scrolltolower">
						<span class="Box">
							<u-list-item v-for="item in list" :key="item.id">

								<u-swipe-action-item class="box" v-if="item.soure == 'clear'" :disabled="true"
									:options="options" :name="item.id">
									<view class="card_img">
										<u--image :showLoading="true" :src="item.carwash.image_text" :lazy-load="true"
											width="80px" height="80px"></u--image>

									</view>
									<u-cell @click="info(item.id)" :label="'  客户 : ' +
										item.busname +
										'  下单时间 :' +
										item.createtime_text +
										'  订单号: ' +
										item.code
										" :key="item.id" center>
										<view slot="title" class="u-slot-title">
											<text class="u-cell-text">车牌号: {{ item.carnumberplate }}</text>
											<span class="tag">
												<u-tag v-if="item.status == '1'" :text="item.status_text" plain="true"
													size="mini" type="primary" />
											</span>

											<span class="tag">
												<u-tag v-if="item.status == '10' || item.status=='2'" :text="item.status_text" plain="true"
													size="mini" type="success" />
											</span>
											<span class="tag">
												<u-tag v-if="item.status == '3'" :text="item.status_text" plain="true"
													size="mini" type="error" />
											</span>
											<span class="tag">
												<u-tag v-if="item.status == '4'" :text="item.status_text" plain="true"
													size="mini" type="success" />
											</span>
											<span class="tag">
												<u-tag v-if="item.status == '5'" :text="item.status_text" plain="true"
													size="mini" type="success" />
											</span>
											<span class="tag">
												<u-tag v-if="item.status == '6'" :text="item.status_text" plain="true"
													size="mini" type="warning" />
											</span>
											
											<span class="tag">
												<u-tag v-if="item.status == '7'" :text="item.status_text" plain="true"
													size="mini" type="error" />

											</span>
											<span class="tag">
												<u-tag v-if="item.status == '9'" :text="item.status_text" plain="true"
													size="mini" type="warning" />

											</span>
											<span class="tagfilter">
												<u-tag v-if="item.status=='10'" :text="'可拒绝'" plain="true" @click="refund"
													size="mini" type="error" />
											</span>

											<span class="taginfo">
												<u-tag v-if="item.soure == null" :text="item.soure_text" plain="true"
													size="mini" type="info" />
											</span>
											<span class="tagwarning">
												<u-tag v-if="item.soure == 'clear'" @click="Filter({ type: 'clear' })"
													:text="item.soure_text" plain="true" size="mini" type="warning" />

											</span>
											<span class="tagerror">
												<u-tag @click="Filter({ stoid: item.store.id })" :text="item.storename_text"
													plain="true" size="mini" type="error" />
											</span>


										</view>
									</u-cell>

								</u-swipe-action-item>
								<u-swipe-action-item v-if="item.soure == 'hire'" :disabled="true" :options="options"
									:name="item.id">
									<view class="card_img">
										<u--image :showLoading="true" :lazy-load="true" :src="item.hire.thumbs_text[0]"
											width="80px" height="80px"></u--image>

									</view>

									<u-cell @click="info(item.id)" :label="'  平台客户 : ' +
										item.busname +
										'  下单时间 :' +
										item.createtime_text +
										'  订单号: ' +
										item.code
										" :key="item.id" center>
										<view slot="title" class="u-slot-title">
											<text class="u-cell-text">车名: {{ item.hire.brankname_text +
												item.hire.btypename_text
											}}</text>
											<span class="tag">
												<u-tag v-if="item.status == '1'" :text="item.status_text" plain="true"
													size="mini" type="primary" />
											</span>
											<span class="tag">
												<u-tag v-if="item.status == '10' ||item.status=='2'" :text="item.status_text" plain="true"
													size="mini" type="success" />
											</span>

											<!-- 接单人 -->
											<span class="recevieperson"  v-if="item.status == '3'">
												<!-- <u-tag  :text="'张三'" v-if="item.status == '3' || item.status=='4'" plain="true"
													size="mini" type="success" /> -->
													<span>接单人:</span>
													<span>{{auth.nickname}}</span>
											</span>
											<span class="recevieperson"  v-if=" item.status=='4'">
												<!-- <u-tag  :text="'张三'" v-if="item.status == '3' || item.status=='4'" plain="true"
													size="mini" type="success" /> -->
													<span>完单人:</span>
													<span>{{ auth.nickname!="" ? auth.nickname :  "暂未知"  }}</span>
											</span>


											<span class="tag">
												<u-tag v-if="item.status == '3'" :text="item.status_text" plain="true"
													size="mini" type="success" />
											</span>
											<span class="tag">
												<u-tag v-if="item.status == '4'" :text="item.status_text" plain="true"
													size="mini" type="success" />
											</span>
											<span class="tag">
												<u-tag v-if="item.status == '5'" :text="item.status_text" plain="true"
													size="mini" type="success" />
											</span>
											<span class="tag">
												<u-tag v-if="item.status == '6'" :text="item.status_text" plain="true"
													size="mini" type="warning" />
											</span>
											<span class="tag">
												<u-tag v-if="item.status == '7'" :text="item.status_text" plain="true"
													size="mini" type="error" />

											</span>
											<span class="tag">
												<u-tag v-if="item.status == '9'" :text="item.status_text" plain="true"
													size="mini" type="warning" />

											</span>

											<span class="taginfo">
												<u-tag v-if="item.soure == null" :text="item.soure_text" plain="true"
													size="mini" type="info" />
											</span>
											<span class="tagfilter">
												<u-tag v-if=" item.status=='10'" :text="'可拒绝'" plain="true" @click="refund"
													size="mini" type="error" />
											</span>

											<span class="taginfo">
												<u-tag v-if="item.soure == 'hire'" @click="Filter({ type: 'hire' })"
													:text="item.soure_text" plain="true" size="mini" type="info" />

											</span>
											<span class="tagerror">
												<u-tag @click="Filter({ stoid: item.store.id })" :text="item.storename_text"
													plain="true" size="mini" type="error" />

											</span>



										</view>
									</u-cell>

								</u-swipe-action-item>
								<u-swipe-action-item v-if="item.soure == 'product'" :disabled="true" :options="options"
									:name="item.id">
									<view class="card_img">
										<u--image :showLoading="true" :lazy-load="true" :src="item.proimg_text"
											width="80px" height="80px"></u--image>

									</view>

									<u-cell @click="info(item.id)" :label="'  平台客户 : ' +
										item.busname +
										'  下单时间 :' +
										item.createtime_text +
										'  订单号: ' +
										item.code
										" :key="item.id" center>
										<view slot="title" class="u-slot-title">
											<text class="u-cell-text">车名: {{ item.cardname }}</text>
											<span class="tag">
												<u-tag v-if="item.status == '1'" :text="item.status_text" plain="true"
													size="mini" type="primary" />
											</span>
											<span class="tag">
												<u-tag v-if="item.status == '10' ||item.status=='2'" :text="item.status_text" plain="true"
													size="mini" type="success" />
											</span>

											<!-- 接单人 -->
											<span class="recevieperson"  v-if="item.status == '3'">
												
													<span>接单人:</span>
													<span>{{auth.nickname}}</span>
											</span>
											<span class="recevieperson"  v-if=" item.status=='4'">
											
													<span>完单人:</span>
													<span>{{ auth.nickname!="" ? auth.nickname :  "暂未知"  }}</span>
											</span>


											<span class="tag">
												<u-tag v-if="item.status == '3'" :text="item.status_text" plain="true"
													size="mini" type="success" />
											</span>
											<span class="tag">
												<u-tag v-if="item.status == '4'" :text="item.status_text" plain="true"
													size="mini" type="success" />
											</span>
											<span class="tag">
												<u-tag v-if="item.status == '5'" :text="item.status_text" plain="true"
													size="mini" type="success" />
											</span>
											<span class="tag">
												<u-tag v-if="item.status == '6'" :text="item.status_text" plain="true"
													size="mini" type="warning" />
											</span>
											<span class="tag">
												<u-tag v-if="item.status == '7'" :text="item.status_text" plain="true"
													size="mini" type="error" />

											</span>
											<span class="tag">
												<u-tag v-if="item.status == '9'" :text="item.status_text" plain="true"
													size="mini" type="warning" />

											</span>

											<span class="taginfo">
												<u-tag v-if="item.soure == 'product'" :text="item.soure_text" plain="true"
													size="mini" type="info" />
											</span>
											<span class="tagfilter">
												<u-tag v-if=" item.status=='10'" :text="'可拒绝'" plain="true" @click="refund"
													size="mini" type="error" />
											</span>

											<span class="taginfo">
												<u-tag v-if="item.soure == 'hire'" @click="Filter({ type: 'hire' })"
													:text="item.soure_text" plain="true" size="mini" type="info" />

											</span>
											<span class="tagerror">
												<u-tag @click="Filter({ stoid: item.store.id })" :text="item.storename_text"
													plain="true" size="mini" type="error" />

											</span>



										</view>
									</u-cell>

								</u-swipe-action-item>
							</u-list-item>

						</span>

						<u-loadmore :status="flag" :loading-text="loadingText" :loadmore-text="loadmoreText"
							:nomore-text="nomoreText" />

					</u-list>
				</u-swipe-action>

			</u-cell-group>
		</view>

		<!-- 消息提醒 -->
		<u-toast ref="notice"></u-toast>

		<u-modal :show="show" @confirm="receiveOrder" @cancel="cancel" showCancelButton title="是否确认接单" ref="uModal"
			:asyncClose="true"></u-modal>
	</view>
</template>

<script>
export default {
	onLoad() {
		this.auth = this.$u.auth.check()
		this.Orderstatuslist()

		this.storelist()
		this.OrderList()


	},

	created() {
		this.timer = setInterval(() => {
			// this.Orderstatuslist()

			this.$u.count.check()
		}, 15000);

	},
	onShow() {
		const currentDate = new Date();
		const currentYear = currentDate.getFullYear();

		const nextdate = currentYear + 1;
		const lastdate = currentYear - 1;
		// 前年时间段
		this.lastYeardate = lastdate + "-" + "01" + "-" + "1"
		// 明年时间段
		this.nextYeardate = nextdate + "-" + "12" + "-" + "31"

	},
	beforeDestroy() {
		clearInterval(this.timer)
	},
	data() {
		return {
			count: {},
			soure: "",
			filtershow: false,
			flag: 'loading',
			loadingText: '努力加载中',
			loadmoreText: '下拉加载更多',
			nomoreText: '没有更多数据了',
			orderstatus: [],
			status: 0,
			storeName: "",
			typeName: "",
			show: false,
			showdate: false,
			auth: {},
			lastYeardate: "",
			nextYeardate: "",
			columns: [

			],
			list: [],
			keyword: "",
			xzstoid: "",
			page: 1,
			orderid: 0,
			searchstyle: "#ffffff",
			borderstyle: "#eee",
			empty: "",
			btnStyle: {
				width: "52px",
				margin: "5% 80%",
				height: "25px",
			},
			options: [
				{
					ststus: 2,
					text: "接单",
					style: {
						backgroundColor: "#3c9cff",
					},
				},
			],
		};
	},
	methods: {

		confirmfilter(e) {
			this.filtershow = false


			this.storeName = e.value[0]
			this.typeName = e.value[1]

			this.Filter({ typeName: this.typeName, storeName: this.storeName })
			this.filtershow = false
		},
		cancelfilter() {
			this.filtershow = false
		},
		// 筛选
		async Filter(item) {


			let data = {
				adminid: this.auth.id,
				soure: item === undefined ? this.type : item.type,
				xzstoid: item === undefined ? this.xzstoid : item.stoid,
				storeName: item === undefined ? this.storeName : item.storeName,
				typeName: item === undefined ? this.typeName : item.typeName,
				keyword: this.keyword,

			}
			let result = await this.$u.api.order.filterdata(data)
			if (result.code) {
				if (result.data.length > 0) {

					this.empty = "notempty"

					this.list = result.data


					setTimeout(function () {
						uni.hideLoading();
					}, 1200);



				} else {
					setTimeout(function () {
						uni.hideLoading();
					}, 1200);
					this.empty = "isempty"
				}
			}

		},
		changeHandler(e) {
			const {
				columnIndex,
				value,
				values, // values为当前变化列的数组内容
				index,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.uPicker
			} = e
			// 当第一列值发生变化时，变化第二列(后一列)对应的选项
			if (columnIndex === 0) {
				// picker为选择器this实例，变化第二列对应的选项
				picker.setColumnValues(1, this.columnData[index])
			}
		},
		// 门店筛选
		shaixuan() {
			this.filtershow = true
		},

		// 日期筛选关闭
		closedate() {
			this.showdate = false
		},
		async confirmdate(e) {
			// 筛选第一个跟最后一个日期
			this.date = `${e[0]} / ${e[e.length - 1]}`

			let data = {
				stoid: this.auth.stoid,
				adminid: this.auth.id,
				date: this.date
			}
			let result = await this.$u.api.order.filterdate(data)
			if (result.code) {
				if (result.data.list.length > 0) {

					this.empty = "notempty"

					this.list = result.data.list




					this.date = ""
					this.showdate = false


				} else {
					this.empty = "isempty"
					this.date = ""

					this.showdate = false


				}
			}

		},
		// 筛选日期
		selectdate(e) {


			this.showdate = true
		},
		// 返回顶部
		topback() {
			this.page = 1
			this.list = []

			this.OrderList()
		},
		async storelist() {

			let data = {
				adminid: this.auth.id,
				stoid: this.auth.stoid
			}
			let result = await this.$u.api.order.mendian(data);

			if (result.code) {
				this.columns = result.data.columns;
				this.columnData = result.data.typelist


			} else {
				this.$refs.notice.show({
					type: "danger",
					message: result.msg,
				});
			}
		},
		// 关键字
		selectparams(e) {
			this.flag = ""

			this.list = []

			this.keyword = e
			uni.showLoading({
				title: '正在查询...'
			});
			this.Filter()

		},
		async selectStatues(e) {

			// 请求数据就把数据加载的打开
			this.qx = ""

			this.status = e.status;
			let data = {
				adminid: this.auth.id,
				status: e.status,
				stoid: this.auth.stoid,
				page: 1
			}


			let result = await this.$u.api.order.OrderIndex(data)

			if (result.code) {

				if (Array.isArray(result.data.list) && result.data.list.length > 0) {
					this.empty = "notempty"
					// 有数据返回就把数据加载的关闭
					this.list = result.data.list

				} else {


					this.empty = "isempty"
					this.qx = ""
				}


			}

		},
		action(item) {

			if (item.index == 0) {
				this.show = true
				this.orderid = item.name[0]


			}

		},
		scrolltolower() {



			this.OrderList()




		},
		// 接单
		async receiveOrder() {

			this.show = false;
			let data = {

				orderid: this.orderid,
				adminid: this.auth.id
			}

			let result = await this.$u.api.order.receive(data)

			if (result.code) {
				this.$refs.notice.show({
					type: "success",
					message: result.msg,
					duration: 2000,

				})
				setTimeout(() => {
					this.OrderList(this.status)
				}, 4000)

				this.$u.route(
					"/pagesB/order/info", {
					orderid: this.orderid
				}
				)
			} else {
				this.$refs.notice.show({
					type: "error",
					message: result.msg,
					duration: 2000
				})
			}
		},
		// 拒绝接单
		async rejectOrder()
		{

		},
		cancel() {
			this.show = false;
		},


		async OrderList(e) {

			if (e) {

				this.status = e
			}

			let data = {

				stoid: this.auth.stoid,
				adminid: this.auth.id,
				status: this.status,
				page: this.page,
				keyword: this.keyword
			};



			let result = await this.$u.api.order.OrderIndex(data);

			if (result.code) {

				if (Array.isArray(result.data.list) && result.data.list.length > 0) {

					this.empty = "notempty"

					this.list = this.list.concat(result.data.list);
					this.page++


				} else {
					this.flag = "nomore"

				}
			}
		},
		async Orderstatuslist() {
			let result = await this.$u.api.order.statusdata({ adminid: this.auth.id, stoid: this.auth.stoid })
			if (result.code) {
				this.orderstatus = result.data
			}
		},

		info(e) {

			this.$u.route("/pagesB/order/info", {
				orderid: e

			})


		},

		clearkeyword(e) {
			this.keyword = ""
			this.flag = ""
		}

	},



}
</script>

<style lang="scss">
.card_img {
	position: absolute;
	left: 20px;
	top: 25px;
}

.box {
	display: flex;
	margin-top: 15px;
	justify-content: space-around;
}

.backtop {
	width: 20px;
	color: "blue";
	margin-left: 15px;
}


.content {}

.list-cell {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 20px 24px;
	color: #323233;
	font-size: 14px;
	line-height: 24px;
	background-color: #fff;
}



.u-cell__label {
	width: 260px;
}



.tag {
	width: 48px;
	right: 210px;
	top: 82px;
	position: absolute;

}

.tagfilter {
	width: 48px;
	right: 150px;
	top: 82px;
	position: absolute;

}

.tagprimary {
	width: 48px;
	right: 250px;
	top: 82px;
	position: absolute;

}

.tagerror {
	width: 48px;
	top: 82px;
	left: 110px;
	position: absolute;
}

.u-cell-group {
	margin-top: 70px;
	height: 670px;
	overflow: hidden;
}

.datebtn {
	width: 60px;
}

.storebtn {
	width: 60px;
}
.recevieperson{
	width: 100px;
	top: 10px;
	left: 290px;
	font-size: 13px;
	color: #919090;
	position: absolute;
}

.taginfo {
	width: 48px;
	top: 82px;
	left: 180px;
	position: absolute;

}

.btngroup {
	width: 100%;
	display: flex;
	position: fixed;
	left: 0px;
	top: 100px;
	justify-content: space-around;
}

.u-cell__title {
	padding: 10px 110px;
	width: 285px;
	position: relative;

}

.tagwarning {
	width: 48px;
	top: 82px;
	left: 180px;

	position: absolute;

}

.u-cell__body__content {
	padding-bottom: 25px;
}

.recordBox {
	height: 100%;
	padding: 0 40rpx;

	.recordItem {
		margin-top: 20rpx;
		background-color: #ffffff;

		.title {
			height: 66rpx;
			padding: 0 20rpx;
			line-height: 66rpx;
			background: #e1e1e1;
			font-size: 32rpx;
			color: #141414;
			text-align: center;
		}

		.contentList {
			display: flex;
			flex-direction: column;
			font-size: 28rpx;
			color: #6d6d6d;

			.contentItem {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px dashed #c1c1c1;
				height: 66rpx;
				padding: 0 20rpx;
				line-height: 66rpx;
			}
		}

		.showDetail {
			color: #548afb;
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}

	}
}


.search {
	width: 80%;
	position: fixed;
	top: 7%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	left: 7%;
	z-index: 999;

}
</style>
